<template>
  <div>
    <div style="position: relative;background: #ffffff;" v-clickoutside="handleClose">
      <div class='selectedRows' :class="rowWidth ? '' : 'dw'">
        <div class='selectedRows-t'>{{ leabelName }}</div>
        <div class="selectedRows-wb">
          <div class='selectedRows-w'>
            <div class='selectedRows-d' v-for='(item, i) in selectedRows' :key='i'>
              <div class='username'>{{ item.realname }}</div>
              <a-icon type="close-circle" @click='del(item, id)' />
            </div>
            <div v-if="selectedRows.length <= 0" class="placeholders">
              {{ placeholderName }}
            </div>
          </div>
          <a-icon style="color:#c8c8c8;font-size:16px;width: 30px" slot="suffix" :type="!showTable ? 'down' : 'up'"
            @click.stop="showTable = !showTable;" />
        </div>
      </div>
      <div v-if="showTable" class="show-table">
        <a-input style='margin-bottom: 10px' v-model="value" allow-clear @change="loadData(true)"
          :placeholder="'xxxxxxxxxxxxxx'" />
        <a-table bordered class="table" size="middle" :rowKey="rowKey" :pagination="ipagination" :columns="columns"
          :dataSource="dataSource" v-bind="tableAttrs" :customRow="selectUser" :scroll="scrolls"
          @change="handleTableChange" :getPopupContainer="getPopupContainer"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, onSelect: onSelect, onSelectAll: onSelectAll }">
          <template v-for="(slotItem) of slots" :slot="slotItem" slot-scope="text, record, index">
            <slot :name="slotItem" v-bind="{ text, record, index }"></slot>
          </template>
        </a-table>
        <div class="center" style='text-align: center'>
          <!-- <a-button class="center" @click.stop="showTable = !showTable;">{{$t('action.close')}}</a-button> -->
        </div>
      </div>
      <div>
      </div>
    </div>
  </div>
</template>

<script>
const clickoutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false;
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e);
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = documentHandler;
    document.addEventListener('click', documentHandler);
  },
  update() { },
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.__vueClickOutside__);
    delete el.__vueClickOutside__;
  },
};
export default {
  name: 'JTreeTable',
  directives: { clickoutside },
  props: {
    scrolls: {
      type: Object,
      default: () => { }
    },
    rowKey: {
      type: String,
      default: 'id'
    },
    leabelName: {
      type: String,
      default: '研发工程师'
    },
    placeholderName: {
      type: String,
      default: '请选择研发工程师'
    },
    rowWidth: {
      type: Boolean,
      default: true
    },
    disable: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      required: true,
    },
    getPopupContainer: {
      type: Function,
      default: (node) => node.parentNode
    },
  },
  data() {
    return {
      selectedRowKeys: [],
      selectedRows: [],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '20', '50', '100'],
        size: "small",
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      columns: [
        {
          title: 'xxxx',
          dataIndex: 'username',
          width: 100,
        },
        {
          title: 'xxxx',
          dataIndex: 'realname',
          width: 100
        },
        {
          title: 'xxxx',
          dataIndex: 'orgCode',
          width: 100
        },
      ],
      selectValue: '',
      showTable: false,
      dataSource: [],
      expandedRowKeys: [],
      value: '',
      id: ""
    }
  },
  methods: {
    // 全选
    onSelectAll(selected, selectedRows, changeRows) {
      if (selected) {
        changeRows.forEach((el, i) => {
          this.selectedRows.push(el)
        })
      } else {
        this.inspect()
      }
      this.$emit('handleClickRow', this.selectedRows)
    },
    inspect() {
      const that = this
      const arr = this.selectedRows.filter(item => !this.selectedRowKeys.includes(item.id));
      arr.forEach((el, i) => {
        that.selectedRows.forEach((el2, i2) => {
          if (el.id == el2.id) {
            that.selectedRows.splice(i2, 1)
          }
        })
      })
      this.$emit('handleClickRow', this.selectedRows)
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
    },
    onSelect(record, selected, selectedRows, nativeEvent) {
      let index;
      if (this.selectedRows.length <= 0) {
        this.selectedRows.push(record)
        return this.$emit('handleClickRow', this.selectedRows)

      }
      let arr = this.selectedRows.filter((item, i) => {
        if (item.id == record.id) {
          return item
        }
      })
      if (arr.length <= 0) {
        this.selectedRows.push(record)
      } else {
        this.selectedRows.forEach((el, i) => {
          if (el.id == record.id) {
            this.selectedRows.splice(i, 1)
          }
        })
      }
      this.$emit('handleClickRow', this.selectedRows)
    },
    del(item) {
      this.selectedRowKeys.forEach((el, i) => {
        if (el == item.id) {
          this.selectedRowKeys.splice(i, 1)
        }
      })
      this.selectedRows.forEach((el, i) => {
        if (el.id == item.id) {
          this.selectedRows.splice(i, 1)
        }
      })

    },
    handleClose(e) {
      this.showTable = false;
    },
    handleInput(e) {
      this.loadData()
    },
    sure() {
      console.log(this.selectedRowKeys)
    },
    selectUser(record, index) {
    },
    /** 加载数据*/
    loadData() {
      let _this = this;
      let params = {
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
        value: this.ipagination.value
      }
      postAction("/auth/sys/user/list", params).then(res => {
        let list = res.result.records;
        _this.dataSource = list;
        this.ipagination.total = parseInt(res.result.total)
      }).finally(() => {

      })
    },
    handleTableChange(pagination, filters, sorter) {
      this.ipagination = pagination;
      this.loadData()
    },
  }
}
</script>

<style scoped>
.show-table {
  zoom: 0.9;
  position: absolute;
  right: 0;
  margin: auto;
  background: #FFFFFF;
  z-index: 1050;
  width: 100%;
  min-width: 280px;
  padding-bottom: 10px;
}

.dw {
  width: 100% !important;
}

.selectedRows {
  height: 32px;
  width: 380px;
  margin-bottom: 5px;
}

.selectedRows-wb {
  border: 1px solid #ccc;
  display: flex;
  align-items: center;

}

.selectedRows-w {
  display: flex;
  width: 345px;
  height: 32px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;

}

.selectedRows-t {
  width: 80px;
}

.selectedRows-d {
  display: flex;
  margin-left: 20px;
  align-items: center;


}

.username {
  margin-right: 8px;
}

.placeholders {
  display: flex;
  align-items: center;
  padding-left: 10px;
  color: #999;
}
</style>